import React from 'react';
import { Input, Form, Select, Checkbox, Button, Space, Cascader, Radio } from 'antd';
import GroupInput from './GroupInput';
import UploadImg from '../../../component/Upload/Upload';
import BraftEditor from '../../../component//BraftEditor/BraftEditor';
import GoodsSpecifications from './GoodsSpecifications';
import './AddGoods.css';
import { inject, observer } from 'mobx-react';
import axios from '../../../utils/http';
const { Option } = Select;
@inject('addGoodsMobx')
@observer
class AddGoods extends React.Component {
  state = {
    groupList: [],
    list: [],
    classList: [],
    labelList: [],
  };
  componentDidMount = () => {
    this.addGroup();
    this.addList();
    this.getOneClass();
    this.getAllLabel();
  };
  /* 获取一级数据 */
  getOneClass = () => {
    axios({
      url: '/mm-goods/goods/queryGoodsCyi',
    }).then(({ data }) => {
      let arr = data.data.map(item => {
        return {
          value: item.goods_cid,
          label: item.goods_cname,
          isLeaf: false,
        };
      });
      this.setState({
        classList: arr,
      });
    });
  };
  /* 动态加载二级分类数据 */
  loadClass = val => {
    const targetOption = val[val.length - 1];
    targetOption.loading = true;
    let twoClassArr = [];
    // load options lazily
    axios({
      url: '/mm-goods/goods/queryGoodsCer',
      params: {
        goodPid: targetOption.value,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        twoClassArr = data.data.map(item => {
          return {
            value: item.goods_cid,
            label: item.goods_cname,
            isLeaf: true,
          };
        });
        targetOption.loading = false;
        let arr = this.state.classList.map(item => {
          if (item.value === targetOption.value) {
            item.children = twoClassArr;
          }
          return item;
        });
        this.setState({
          classList: arr,
        });
      }
    });
  };
  /* 获取所有标签 */
  getAllLabel = () => {
    axios({
      url: '/mm-goods/goods/qureyPll',
      method: 'get',
    }).then(({ data }) => {
      let arr = data.data.filter(item => item.pll_statu === 1);
      let newarr = arr.map(item => {
        return { label: item.pll_name, value: item.pll_id };
      });
      this.setState({
        labelList: newarr,
      });
    });
  };
  /* 添加拼团规格 */
  addGroup = () => {
    const list = {
      id: this.state.groupList.length,
      com: (
        <GroupInput
          delGroup={this.delGroup}
          key={this.state.groupList.length + 1}
          index={this.state.groupList.length}
        />
      ),
    };
    let arr = [...this.state.groupList];
    arr.push(list);
    this.setState({
      groupList: arr,
    });
    this.props.addGoodsMobx.addGp({
      id: this.state.groupList.length,
      val: {
        gpNogb: '' /* 团购人数 */,
        gpPrice: '' /* 团购价格 */,
      },
    });
  };
  /* 删除拼团规格 */
  delGroup = index => {
    let arr = [...this.state.groupList];
    arr.splice(
      arr.findIndex(item => item.id === index),
      1
    );
    this.setState({
      groupList: arr,
    });
    this.props.addGoodsMobx.delGp(index);
  };
  /* 添加规格 */
  addList = () => {
    const list = {
      id: this.state.list.length,
      com: (
        <GoodsSpecifications
          delList={this.delList}
          key={this.state.list.length + 1}
          index={this.state.list.length}
        />
      ),
    };
    let arr = [...this.state.list];
    arr.push(list);
    this.setState({
      list: arr,
    });
    this.props.addGoodsMobx.addComspec({
      id: this.state.list.length,
      val: {
        comspecName: '' /* 商品规格名称 */,
        number: '' /* 货号 */,
        space: '' /* 价格 */,
        inventory: '' /* 库存数量 */,
        file: '' /* 图片 */,
      },
    });
  };
  /* 删除规格 */
  delList = index => {
    let arr = [...this.state.list];
    arr.splice(
      arr.findIndex(item => item.id === index),
      1
    );
    this.setState({
      list: arr,
    });
    this.props.addGoodsMobx.delComspec(index);
  };

  addGoodss = async () => {
    let res = await this.props.addGoodsMobx.addGoods();
    if (res) {
      this.props.history.push('/Home/ShangPing/GoodsManage/GoodsIndex');
    }
  };
  render() {
    const { formChange } = this.props.addGoodsMobx;
    const radioOptions = [
      { label: '精品', value: 1 },
      { label: '新品', value: 2 },
      { label: '热销', value: 3 },
    ];
    return (
      <div className="addGoods">
        {/* <h1>添加商品</h1> */}
        <Form style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px' }}>
          <div className="form_item_box">
            {/* 商品名称 */}
            <Form.Item
              label="商品名称"
              name="商品名称"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              hasFeedback
              style={{ width: '300px' }}
            >
              <Input
                bordered={false}
                allowClear
                onChange={e => formChange('goodsName', e.target.value)}
              />
            </Form.Item>

            {/* 商品编号 */}
            <Form.Item
              label="商品编号"
              name="商品编号"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              hasFeedback
              style={{ width: '300px' }}
            >
              <Input
                bordered={false}
                allowClear
                onChange={e => formChange('goodsCode', e.target.value)}
              />
            </Form.Item>
            {/* 商品分类 */}
            <Form.Item
              label="商品分类"
              name="商品分类"
              rules={[
                {
                  required: true,
                },
              ]}
              hasFeedback
              style={{ width: '300px' }}
            >
              <Cascader
                className="classSelect"
                bordered={false}
                options={this.state.classList}
                changeOnSelect
                loadData={this.loadClass}
                onChange={e => formChange('goodsCid', e[e.length - 1])}
                style={{ borderBottom: '1px solid #5F5F61' }}
              />
            </Form.Item>

            {/* 商品简介 */}
            <Form.Item
              label="商品简介"
              name="商品简介"
              rules={[
                {
                  required: true,
                },
              ]}
              hasFeedback
              style={{ width: '300px' }}
              validateTrigger="onBlur"
            >
              <Input.TextArea
                bordered={false}
                allowClear
                autoSize
                style={{ resize: 'none' }}
                onChange={e => formChange('goodsJj', e.target.value)}
              ></Input.TextArea>
            </Form.Item>

            {/* 商品标签 */}
            <Form.Item
              label="商品标签"
              name="商品标签"
              rules={[
                {
                  required: true,
                  message: '请选择商品标签',
                },
              ]}
              style={{ width: '350px' }}
            >
              <Checkbox.Group
                options={this.state.labelList}
                onChange={e => formChange('pllIds', e)}
                style={{ color: 'white' }}
              />
            </Form.Item>

            {/* 团长佣金 */}
            <Form.Item
              label="团长佣金"
              name="团长佣金"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              style={{ width: '300px' }}
            >
              <Input
                bordered={false}
                defaultValue={0}
                type="number"
                min={0}
                addonAfter="￥"
                onChange={e => formChange('goodsCothotr', e.target.value)}
              />
            </Form.Item>
            {/* 限购数量 */}
            <Form.Item
              label="限购数量"
              name="限购数量"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              style={{ width: '300px' }}
            >
              <Input
                type="number"
                min={0}
                defaultValue={0}
                addonAfter="0为不限购"
                onChange={e => formChange('goodsLq', e.target.value)}
              />
            </Form.Item>
            {/* 商品价格 */}
            <Form.Item
              label="商品价格"
              name="商品价格"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              style={{ width: '300px' }}
            >
              <Input
                bordered={false}
                type="number"
                min={0}
                defaultValue={0}
                onChange={e => formChange('goodsPrice', e.target.value)}
              />
            </Form.Item>
            {/* 市场价格 */}
            <Form.Item
              label="市场价格"
              name="市场价格"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              style={{ width: '300px' }}
            >
              <Input
                bordered={false}
                type="number"
                min={0}
                defaultValue={0}
                onChange={e => formChange('goodsMp', e.target.value)}
              />
            </Form.Item>
            {/* 拼团价格 */}
            <Form.Item
              label="拼团价格"
              name="拼团价格"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              style={{ width: '300px' }}
            >
              <div className="group_price">
                <div className="groupHeader">
                  <span>团购人数</span>
                  <span>团购价格</span>
                  <span>操作</span>
                </div>
                <div ref={this.group} className="group">
                  {this.state.groupList.map(item => item.com)}
                </div>
                <Button onClick={this.addGroup} style={{ marginTop: '10px' }} type="primary">
                  添加拼团规则
                </Button>
              </div>
            </Form.Item>
          </div>
          <div className="form_item_box form_item_box2">
            {/* 商品规格 */}
            <Form.Item
              label="商品规格"
              name="商品规格"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
            >
              <div className="group_price">
                <div className="group">
                  <div className="goods">
                    <table ref={this.tr}>
                      <thead style={{ color: 'white' }}>
                        <tr>
                          <td>名称</td>
                          <td>货号</td>
                          <td>价格</td>
                          <td>库存</td>
                          <td>图片</td>
                          <td>操作</td>
                        </tr>
                      </thead>
                      <tbody>{this.state.list.map(item => item.com)}</tbody>
                    </table>
                  </div>
                </div>
                <Button onClick={this.addList} style={{ marginTop: '10px' }} type="primary">
                  添加商品规格
                </Button>
              </div>
            </Form.Item>
            {/* 商品详情 */}
            <Form.Item
              label="商品详情"
              name="商品详情"
              rules={[
                {
                  required: true,
                },
              ]}
              hasFeedback
              style={{ maxWidth: '800px' }}
              validateTrigger="onBlur"
            >
              <BraftEditor formChange={formChange}></BraftEditor>
            </Form.Item>
            {/* 商品相册 */}
            <Form.Item
              className="groupImg"
              label="商品相册"
              name="商品相册"
              style={{ height: '155px' }}
            >
              <UploadImg ok="ok" maxNum={4} Size={2} type="goodsAlbum"></UploadImg>
              <p className="tip_p">注：相册图片大小每个不能超过2MB，最多上传4张</p>
            </Form.Item>
          </div>
          <div className="form_item_box" style={{ maxWidth: '450px' }}>
            {/* 商品重量 */}
            <Form.Item
              label="商品重量"
              name="商品重量"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              hasFeedback
            >
              <div style={{ display: 'flex' }}>
                <Space>
                  <Input
                    bordered={false}
                    type="number"
                    min={0}
                    defaultValue={0}
                    allowClear
                    onChange={e => formChange('goodsCw', e.target.value)}
                  />
                  <Select
                    defaultValue="Kg"
                    style={{ width: '60px', color: 'white' }}
                    bordered={false}
                    onChange={e => formChange('goodsC', e)}
                  >
                    <Option value="Kg">Kg</Option>
                    <Option value="g">g</Option>
                  </Select>
                </Space>
              </div>
            </Form.Item>
            {/* 商品库存 */}
            <Form.Item
              label="商品库存"
              name="商品库存"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              style={{ marginBottom: '10px' }}
              hasFeedback
            >
              <Input
                bordered={false}
                type="number"
                min={0}
                defaultValue={0}
                allowClear
                onChange={e => formChange('goodsCi', e.target.value)}
              />
              <p className="tip_p">
                注：库存在商品存在货品时为不可编辑状态，库存数值取决于其货品数量
              </p>
            </Form.Item>
            {/* 库存警告 */}
            <Form.Item
              label="库存警告"
              name="库存警告"
              rules={[
                {
                  required: true,
                  type: 'string',
                },
              ]}
              hasFeedback
            >
              <Input
                bordered={false}
                type="number"
                min={0}
                defaultValue={1}
                allowClear
                onChange={e => formChange('goodsIw', e.target.value)}
              />
            </Form.Item>
            {/* 加入推荐 */}
            <Form.Item
              label="加入推荐"
              name="加入推荐"
              rules={[
                {
                  required: true,
                  message: '请选择加入推荐',
                },
              ]}
              style={{ marginBottom: '10px' }}
            >
              <Radio.Group
                options={radioOptions}
                onChange={e => formChange('goodsRs', e.target.value)}
                defaultValue={1}
              />
            </Form.Item>
            {/* 免运费 */}
            <Form.Item label="免 运 费 " style={{ marginBottom: '10px' }}>
              <Checkbox
                style={{ width: '71px' }}
                defaultChecked
                onChange={e => formChange('goodsFss', e.target.checked === true ? 1 : 0)}
              >
                是
              </Checkbox>
              <span style={{ color: 'rgb(182, 182, 182)' }}>是否为免运费商品</span>
            </Form.Item>

            {/* 商家备注 */}
            <Form.Item
              label="商家备注"
              hasFeedback
              style={{ width: '300px', marginBottom: '5px' }}
              validateTrigger="onBlur"
            >
              <Input.TextArea
                allowClear
                autoSize
                style={{ resize: 'none' }}
                onChange={e => formChange('goodsRemarks', e.target.value)}
              />
              <span style={{ color: 'rgb(182, 182, 182)' }}>注：仅供商家自己看到的信息</span>
            </Form.Item>
            {/* 商品图片 */}
            <Form.Item
              className="goodsImg"
              label="商品图片"
              name="商品图片"
              style={{ marginBottom: '0px', height: '155px' }}
            >
              <UploadImg maxNum={1} Size={2} type="goodsImg" ok="ok"></UploadImg>
              <p className="tip_p">注：图片大小不能超过2MB</p>
            </Form.Item>
            {/* 拼团图片 */}
            <Form.Item
              className="groupImg"
              label="拼团图片"
              name="拼团图片"
              style={{ height: '155px', marginBottom: '0' }}
            >
              <UploadImg ok="ok" maxNum={1} Size={2} type="spellGroupImg"></UploadImg>
              <p className="tip_p">注：图片大小不能超过2MB</p>
            </Form.Item>
          </div>
        </Form>
        <div style={{ textAlign: 'right', paddingTop: '8px' }}>
          <Button type="primary" onClick={this.addGoodss}>
            提交
          </Button>
        </div>
      </div>
    );
  }
}
export default AddGoods;
